<template>
  <div>
    <div class="wrap" :style="'top:' + navHeight" ref="element">
      <van-search
        class="common_search"
        @search="confirm"
        @clear="clear"
        v-model="searchVal"
        :placeholder="placeholder"
        :maxlength="maxlength"
        v-if="this.needSearch"
      />
      <van-dropdown-menu v-if="this.filterTab" active-color="#00c1de">
        <van-dropdown-item
          v-for="(item, index) in this.filterParams"
          :key="index"
          :options="item.data"
          @change="handleChange"
          :title="item.title"
        />
      </van-dropdown-menu>
    </div>

    <van-list
      :finished="finished"
      v-model="loading"
      finished-text="没有更多了"
      @load="loadMore"
      :style="'padding-top: ' + listPaddingTop"
    >
      <slot />
    </van-list>
  </div>
</template>

<script>
/**
 * PageList 带搜索过滤条件的分页列表
 * @property {String} placeholder 搜索栏Placeholder
 * @property {Number} maxlength 输入最大长度
 * @property {String} url 请求数据的path
 * @property {Object} params 搜索框条件对象
 * params: {
      page: 0,
      limit: 10,
      dataType: "CaseList",
    },
 * @property {Boolean} filterTab 是否带过滤条件bar 默认false不带
 * @property {Array} filterParams  过滤bar数据源
 * filterParams: [
    {
      name: "Type",
      title: "来源",
      data: [
        { text: "公共", value: "Sys" },
        { text: "公司", value: "Company" },
      ],
    },
    {
      name: "AttExt",
      title: "格式",
      data: [
        { text: "不限", value: "" },
        { text: "PDF文档", value: ".pdf" },
        { text: "MP4视频", value: ".mp4" },
      ],
    },
  ],
 * @event {Function} initList 数据回调    @initList="_initList" 返回数据为list
 * _initList(list){
      this.list = list
    },
 */
import { deepClone } from "@/utils";
export default {
  props: {
    placeholder: {
      type: String,
      default: "搜索",
    },
    maxlength: {
      type: [Number, String],
      default: 100,
    },
    value: {
      type: [Number, String],
      default: "",
    },
    url: {
      type: String,
      default: "",
    },
    params: {
      type: Object,
      default: () => {
        return {};
      },
    },
    filterTab: {
      type: Boolean,
      default: false,
    },
    filterParams: {
      type: Array,
      default: () => [
        {
          name: "Type",
          title: "来源",
          data: [
            { text: "公共", value: "Sys" },
            { text: "公司", value: "Company" },
          ],
        },
      ],
    },
    refresh: {
      type: Boolean,
      default: false,
    },
    needSearch: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      searchVal: "",
      localParams: {},
      resetParams: {},
      selFilterParams: [],
      conditions: [],
      list: [],
      loading: false,
      finished: false,
      navHeight: 0,
      listPaddingTop: 0,
      first: false,
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(newSearchVal) {
        this.searchVal = newSearchVal;
      },
    },
    searchVal(newVal, oldVal) {
      this.$emit("input", newVal);
    },
    refresh: {
      immediate: true,
      handler(newVal) {
        if (newVal) this.confirm();
      },
    },
  },
  created() {
    this.localParams = Object.assign(
      { page: 0, limit: 10, dataType: "List" },
      this.params
    );
    this.resetParams = { ...this.localParams };
    this.first = true;
    this.getList();
  },
  mounted() {
    this.navHeight =
      document.getElementsByClassName("van-nav-bar")[0].offsetHeight + "px";
    this.listPaddingTop = window.getComputedStyle(this.$refs.element).height;
  },
  methods: {
    handleChange(value) {
      console.log("handleChange")
      console.log(value)
      this.selFilterParams = deepClone(this.filterParams);
      this.selFilterParams.filter((item) => {
        item.data = item.data.filter((it) => {
          return it.value === value;
        });
        return item;
      });
      console.log("selFilterParams")
      console.log(this.selFilterParams)
      this.confirm();
    },

    clear() {
      this.searchVal = "";
      this.localParams = this.resetParams;
      this.getList();
    },

    confirm() {
      this.localParams.page = 0;
      var conditions = [
        {
          Name: "Keywords",
          DisplayName: "",
          Value: "",
          Operator: "like",
          DataType: "String",
        },
      ];
      conditions.forEach((item) => {
        item.DisplayName = this.searchVal;
        item.Value = this.searchVal;
      });
      this.selFilterParams.forEach((condition) => {
        conditions.push({
          Name: condition.name,
          DisplayName: condition.data[0] && condition.data[0].text,
          Value: condition.data[0] && condition.data[0].value,
          Operator: "=",
          DataType: "String",
        });
      });
      this.localParams.conditions = JSON.stringify(conditions);
      this.getList();
    },

    getList() {
      this.$axios
        .get(this.url,{params:this.localParams})
        .then((res) => {
          this.loading = false;
          if (!res.data.HasNextPage) {
            this.finished = true;
          }
          this.list = res.data.Data;
          this.localParams.page = res.data.PageIndex;
          this.$emit("initList", this.list);
          this.first = false;
        })
        .catch((err) => {
          console.log("err", err);
          this.finished = true;
        });
    },
    loadMore() {
      if (!this.first) {
        this.loading = true;
        ++this.localParams.page;
        this.$axios
          .get(this.url,{params:this.localParams})
          .then((res) => {
            this.loading = false;
            this.localParams.page = res.data.PageIndex;
            this.list = this.list.concat(res.data.Data);
            if (!res.data.HasNextPage) {
              this.finished = true;
            }
            this.$emit("initList", this.list);
          })
          .catch((err) => {
            console.log("err", err);
            this.finished = true;
          });
      }
    },
    refreshList() {
      this.confirm();
    },
  },
};
</script>
<style lang="less">
.wrap {
  width: 100%;
  position: fixed;
  z-index: 1000;
}
</style>